<template>
  <view class="orderList">
    <orderTab v-if="isOrderTabVisible" :tabList="tabList" @submit="tabInfo" :type="Number(type)"></orderTab>
    <view style="height:225rpx ;" v-else></view>  
    <view class="orderLists">
      <view class="list bgRadius" @click="getDetail(item)" v-for="(item,index) in list" :key="index" v-if="list.length!=0">
        <view class="bianhao flex flex-align flex-bt">
          <view class="left">
            <text>订单编号：</text>
            <text>{{item.order_no}}</text>
          </view>
          <view class="right flex flex-align" v-if="item.order_status==0||item.order_status==2">
            <uni-countdown color="#FE7431" :show-day="false" :show-hour="false" :hour="item.hour" :minute="item.minute" :second="item.second" />
            <text>后取消</text>
          </view>
          <view class="right flex flex-align" v-if="item.order_status!=0&&item.order_status!=2">
            <text>{{item.order_status==4||item.order_status==3?'待发货':item.order_status==5?'待收货':item.order_status==1?'已完成':'退款售后'}}</text>
          </view>
        </view>
        <view class="shopList">
          <view class="shopItem flex flex-bt">
            <view class="left flex">
              <image :src="getImgUrl(item.goods_image)"  mode="scaleToFill" />
              <view class="flex flex-direction flex-bt">
                <view class="name">{{item.goods_name}}</view>
                <view class="text">
                  <view>
                    <text v-for="(itm,ins) in item.goods_specs" :key="ins">{{ itm }} <text v-if="ins<(item.goods_specs.length-1)">,</text></text>
                  </view>
                </view>
              </view>
            </view>
            <view class="right">
              <view class="price">
               <text v-if="item.coinid==1">￥</text>{{item.goods_price}} <text v-if="item.coinid!=1">{{item.coinname}}</text>
              </view>
              <view class="number">x{{item.goods_num}}</view>
            </view>
          </view>
        </view>
        <view class="quanBao flex flex-align flex-end" v-if="item.return_coupon" @click.stop="openGiftDetail(item.return_coupon)">
          <view class="right flex flex-align">
            <view class="name">{{item.return_coupon[0].name}}*{{ item.return_coupon[0].num }}...</view>
            <view class="value">
              <uni-icons type="right" size="16" color="#fff"></uni-icons>
            </view> 
          </view>
        </view>
        <view class="orderbot">
          <view class="zhuangtai flex flex-align flex-end">
            <view class="name" v-if="item.coinid==1">{{item.order_status==0||item.order_status==2?'待付款:':'金额:'}}<text>￥</text>{{item.order_cash_amount}}</view>
            <view class="name" v-if="item.coinid!=1">
             {{item.order_status==0||item.order_status==2?'待付款:':'金额:'}} <text v-if="item.order_cash_amount!=0">￥{{ item.order_cash_amount }}+</text>
              {{item.order_amount}}
              <text style="font-size: 24rpx;">{{item.coinname}}</text>
            </view>
          </view>
          <view class="flex flex-align flex-end" v-if="item.order_status==0||item.order_status==2">
            <view class="btns flex flex-align flex-center">立即支付</view>
          </view>
          <view class="flex flex-align flex-end" v-if="item.order_status==5">
            <view class="btns flex flex-align flex-center" @click.stop="orderSign(item.order_id)">确认签收</view>
          </view>
          
        </view>
      </view>
      <view class="noData" v-if="list.length==0">
        <noData acImg="/static/nodata/noorder.png" content="暂无订单" width="400rpx" color="#969799"></noData>  
      </view>
    </view>
    <giftdetail ref="giftdetailRef" v-if="return_coupon" :dataInfo="return_coupon"></giftdetail>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, unref, watch } from 'vue'
import NP from 'number-precision';
import orderTab from '@/components/orderTab.vue';
import {onLoad, onReachBottom, onShow} from "@dcloudio/uni-app";
import { orderLists, orderSignComplete } from '@/api/user';
import noData from '@/components/noData.vue';
import { useAuthStore } from '@/stores/counter';
import { getImgUrl, getTimeDifference, menuJump, toast } from '@/utils/tools';
import giftdetail from '../shop/components/giftdetail.vue';
const list = ref<any>([])
const orderStore = useAuthStore();
const goodTypeList = computed(() => orderStore.confige.currency); // 商品类型
const type = ref(0)
const isOrderTabVisible = ref(true)
const giftdetailRef = ref()
const return_coupon = ref<any>([])
onLoad((e:any) => {
  type.value = e.type?e.type:0
  // getOrderList()
});
onShow(() => {
  isOrderTabVisible.value = true
})
onReachBottom(() => {
  if(list.value.length == total.value){
    return
  }
  parme.value.page++
  getOrderList()
})
const tabList = ref([
    {
      id:0,
      name:'全部'
    },
    {
      id:1,
      name:'待付款'
    },
    {
      id:2,
      name:'待发货'
    },
    {
      id:3,
      name:'待收货'
    },
    {
      id:4,
      name:'已完成'
    },
    {
      id:5,
      name:'退款售后'
    },
  ])
  function tabInfo(e: any){
    if(e.keyWord){
      console.log(e)
    }else{
      type.value = e
      parme.value.page = 1
      parme.value.status = e
      getOrderList()
    }
  }
  const total = ref(0)
  // 获取订单列表
  const parme = ref({
    page:1,
    size:10,
    status:type.value,
  })
  function getOrderList(){
    orderLists(parme.value).then((res:any)=>{
      // 数据插入
      res.data.forEach((item:any) => {
        item.hour = JSON.parse(getTimeDifference(item.survived_at)).hour
        item.minute = JSON.parse(getTimeDifference(item.survived_at)).minute
        item.second = JSON.parse(getTimeDifference(item.survived_at)).second
        item.amount = NP.times(item.goods_price,item.goods_num)
        item.coinid = unref(goodTypeList).find((v: { id: any; }) => v.id === item.goods_pay_currency_id)?.id
        item.coinname = unref(goodTypeList).find((v: { id: any; }) => v.id === item.goods_pay_currency_id)?.name
      });
      if(parme.value.page == 1){
        list.value = res.data
      }else{
        list.value = list.value.concat(res.data)
      }
      total.value = res.total
    })
  }
  function getDetail(e: { order_id: string; }) {
    menuJump({is_tab: false,link: '/pages/orderList/orderDetail?id='+e.order_id,link_type: 1})
    isOrderTabVisible.value = false
  }
  function openGiftDetail(e: any){
    return_coupon.value = e
    giftdetailRef.value.open()
  }
  // 订单签收
  function orderSign(order_id: any) {
    
    orderSignComplete({order_id:order_id}).then((res:any)=>{
      uni.showToast({
        title: '签收成功',
        icon:'none',
        duration: 1000
      })
      setTimeout(() => {
        isOrderTabVisible.value = false
        parme.value.page = 1
        parme.value.status = 4
        type.value = 4
        setTimeout(() => {
          isOrderTabVisible.value = true
        }, 1);
      }, 1000);
    })
  }

</script>

<style scoped lang="scss">
.noData{padding-top: 10vh;}
.mar15{margin-right: 20rpx;}
.orderList{padding-bottom: 1rpx;}
.orderLists{padding:0rpx 20rpx;
  .list{
    .bianhao{
     .left{font-size: 26rpx;color: #969799;}
      .right{font-size: 26rpx;color: #FE7431;
      }
    }
    .quanBao{background:url('@/static/shop/shop05.png');border-radius: 50rpx;color: #fff;padding-left: 20rpx;margin:20rpx 0 0;
      background-size: 100% 100%;
      .flex{padding: 14rpx 10rpx 14rpx 0;
        .name{font-size: 24rpx;color: #fff;}
        .value{font-size: 24rpx;color: #FE7431;}
        }
      }
    .shopList{
      .shopItem{padding: 20rpx 0;
        .left{
          image{width: 170rpx;height: 170rpx;}
          .flex-direction{margin-left: 20rpx;
            .name{font-size: 28rpx;color: #333;width: 330rpx;font-weight: bold;}
            .text{font-size: 24rpx;color: #969799;margin-top: 10rpx;
            view{background: #F5F6F7;border-radius: 40rpx;padding: 4rpx 20rpx;display: inline-block;}
            }
          }
        }
      .right{text-align: right;font-weight: bold;
        .price{font-size: 32rpx;color: #323233;
          text{font-size: 24rpx;}
        }
        .number{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
      }
      }
    }
   .orderbot{padding: 20rpx 0 0;
     .zhuangtai{font-size: 28rpx;color: #323233;
       .name{margin-right: 20rpx;}
      }
      .btns{width: 160rpx;height: 60rpx;text-align: center;background: #FE7431;border-radius: 40rpx;color: #fff;margin-top: 20rpx;font-size: 26rpx;}

    }
  }
}
</style>